<script setup>
import {computed} from 'vue';

const props = defineProps({
  required: Boolean,
  labelStyle: Object,
});

const labelStyleComputed = computed(() => {
  const style = {};
  style.justifyContent = 'flex-start';
  return Object.assign(style, props.labelStyle || {});
});
</script>

<template>
  <view class="custom-form-label">
    <text v-if="required" class="required u-form-item__body__left__content__required">*</text>
    <text class="label u-form-item__body__left__content__label" :style="labelStyleComputed">
      <slot></slot>
    </text>
  </view>
</template>

<style scoped lang="scss">
.custom-form-label {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-right: 10rpx;

  .required {
    font-size: 20px;
    line-height: 20px;
    top: 3px;
  }

  .label {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    font-size: 15px;
  }
}
</style>
